<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1>{{web.vif}}</h1>
    <h1 v-if="web.vif">我显示出来了</h1>
    <button @click='togg'>切换</button>
    <p v-if="web.user<1000">新网站</p>
    <p v-else-if="web.user >= 1000 && web.user<10000">优秀网站</p>
    <p v-else>很6网址</p>

  </div>
  <!-- /*
  v-show 通过 css display属性 来控制元素的显示或隐藏
  v-if 用于对元素进行条件渲染. 当条件为 true 时, 渲染该元素, 为 false 时, 则不渲染

  v-show 适用于频繁切换元素的显示状态, 因为只改变 display 属性, 不需要重新渲染整个组件
  v-if 适用于较少改变的场景, 因为频繁从 dom 中删除或添加元素, 会导致性能下降
  */ -->
  <script type='module'>
    import { createApp, reactive } from './vue.esm-browser.js'
    createApp({
      setup() {
        const web = reactive({
          vif: true,
          user: 200000
        })
        const togg = () => {
          web.vif = !web.vif
        }
        return {
          web,
          togg
        }
      }

    }).mount('#app')
  </script>
</body>

</html>